const nameMap = {
  "Afghanistan": '阿富汗',
  "Singapore": '新加坡',
  "Angola": '安哥拉',
  "Albania": '阿尔巴尼亚',
  "'United Arab Emirates'": '阿联酋',
  "Argentina": '阿根廷',
  "Armenia": '亚美尼亚',
  "'French Southern and Antarctic Lands'":
    '法属南半球和南极领地',
  "Australia": '澳大利亚',
  "Austria": '奥地利',
  "Azerbaijan": '阿塞拜疆',
  "Burundi": '布隆迪',
  "Belgium": '比利时',
  "Benin": '贝宁',
  "'Burkina Faso'": '布基纳法索',
  "Bangladesh": '孟加拉国',
  "Bulgaria": '保加利亚',
  "The Bahamas": '巴哈马',
  "Bosnia and Herzegovina": '波斯尼亚和黑塞哥维那',
  "Belarus": '白俄罗斯',
  "Belize": '伯利兹',
  "Bermuda": '百慕大',
  "Bolivia": '玻利维亚',
  "Brazil": '巴西',
  "Brunei": '文莱',
  "Bhutan": '不丹',
  "Botswana": '博茨瓦纳',
  "Central African Republic": '中非共和国',
  "Canada": '加拿大',
  "Switzerland": '瑞士',
  "Chile": '智利',
  "China": '中国',
  "Ivory Coast": '象牙海岸',
  "Cameroon": '喀麦隆',
  "Democratic Republic of the Congo": '刚果民主共和国',
  "Republic of the Congo": '刚果共和国',
  "Colombia": '哥伦比亚',
  "Costa Rica": '哥斯达黎加',
  "Cuba": '古巴',
  "Northern Cyprus": '北塞浦路斯',
  "Cyprus": '塞浦路斯',
  "Czech Republic": '捷克共和国',
  "Germany": '德国',
  "Djibouti": '吉布提',
  "Denmark": '丹麦',
  "Dominican Republic": '多明尼加共和国',
  "Algeria": '阿尔及利亚',
  "Ecuador": '厄瓜多尔',
  "Egypt": '埃及',
  "Eritrea": '厄立特里亚',
  "Spain": '西班牙',
  "Estonia": '爱沙尼亚',
  "Ethiopia": '埃塞俄比亚',
  "Finland": '芬兰',
  "Fiji": '斐',
  "Falkland Islands": '福克兰群岛',
  "France": '法国',
  "Gabon": '加蓬',
  "United Kingdom": '英国',
  "Georgia": '格鲁吉亚',
  "Ghana": '加纳',
  "Guinea": '几内亚',
  "Gambia": '冈比亚',
  "Guinea Bissau": '几内亚比绍',
  "Greece": '希腊',
  "Greenland": '格陵兰',
  "Guatemala": '危地马拉',
  "French Guiana": '法属圭亚那',
  "Guyana": '圭亚那',
  "Honduras": '洪都拉斯',
  "Croatia": '克罗地亚',
  "Haiti": '海地',
  "Hungary": '匈牙利',
  "Indonesia": '印度尼西亚',
  "India": '印度',
  "Ireland": '爱尔兰',
  "Iran": '伊朗',
  "Iraq": '伊拉克',
  "Iceland": '冰岛',
  "Israel": '以色列',
  "Italy": '意大利',
  "Jamaica": '牙买加',
  "Jordan": '约旦',
  "Japan": '日本',
  "Kazakhstan": '哈萨克斯坦',
  "Kenya": '肯尼亚',
  "Kyrgyzstan": '吉尔吉斯斯坦',
  "Cambodia": '柬埔寨',
  "Kosovo": '科索沃',
  "Kuwait": '科威特',
  "Laos": '老挝',
  "Lebanon": '黎巴嫩',
  "Liberia": '利比里亚',
  "Libya": '利比亚',
  "Sri Lanka": '斯里兰卡',
  "Lesotho": '莱索托',
  "Lithuania": '立陶宛',
  "Luxembourg": '卢森堡',
  "Latvia": '拉脱维亚',
  "Morocco": '摩洛哥',
  "Moldova": '摩尔多瓦',
  "Madagascar": '马达加斯加',
  "Mexico": '墨西哥',
  "Macedonia": '马其顿',
  "Mali": '马里',
  "Myanmar": '缅甸',
  "Montenegro": '黑山',
  "Mongolia": '蒙古',
  "Mozambique": '莫桑比克',
  "Mauritania": '毛里塔尼亚',
  "Malawi": '马拉维',
  "Malaysia": '马来西亚',
  "Namibia": '纳米比亚',
  "New Caledonia": '新喀里多尼亚',
  "Niger": '尼日尔',
  "Nigeria": '尼日利亚',
  "Nicaragua": '尼加拉瓜',
  "Netherlands": '荷兰',
  "Norway": '挪威',
  "Nepal": '尼泊尔',
  "New Zealand": '新西兰',
  "Oman": '阿曼',
  "Pakistan": '巴基斯坦',
  "Panama": '巴拿马',
  "Peru": '秘鲁',
  "Philippines": '菲律宾',
  "Papua New Guinea": '巴布亚新几内亚',
  "Poland": '波兰',
  "Puerto Rico": '波多黎各',
  "North Korea": '北朝鲜',
  "Portugal": '葡萄牙',
  "Paraguay": '巴拉圭',
  "Qatar": '卡塔尔',
  "Romania": '罗马尼亚',
  "Russia": '俄罗斯',
  "Rwanda": '卢旺达',
  "Western Sahara": '西撒哈拉',
  "Saudi Arabia": '沙特阿拉伯',
  "Sudan": '苏丹',
  "South Sudan": '南苏丹',
  "Senegal": '塞内加尔',
  "Solomon Islands": '所罗门群岛',
  "Sierra Leone": '塞拉利昂',
  "El Salvador": '萨尔瓦多',
  "Somaliland": '索马里兰',
  "Somalia": '索马里',
  "Republic of Serbia": '塞尔维亚',
  "Suriname": '苏里南',
  "Slovakia": '斯洛伐克',
  "Slovenia": '斯洛文尼亚',
  "Sweden": '瑞典',
  "Swaziland": '斯威士兰',
  "Syria": '叙利亚',
  "Chad": '乍得',
  "Togo": '多哥',
  "Thailand": '泰国',
  "Tajikistan": '塔吉克斯坦',
  "Turkmenistan": '土库曼斯坦',
  "East Timor": '东帝汶',
  "Trinidad and Tobago": '特里尼达和多巴哥',
  "Tunisia": '突尼斯',
  "Turkey": '土耳其',
  "United Republic of Tanzania": '坦桑尼亚',
  "Uganda": '乌干达',
  "Ukraine": '乌克兰',
  "Uruguay": '乌拉圭',
  "United States": '美国',
  "Uzbekistan": '乌兹别克斯坦',
  "Venezuela": '委内瑞拉',
  "Vietnam": '越南',
  "Vanuatu": '瓦努阿图',
  "West Bank": '西岸',
  "Yemen": '也门',
  "South Africa": '南非',
  "Zambia": '赞比亚',
  "Korea": '韩国',
  "Tanzania": '坦桑尼亚',
  "Zimbabwe": '津巴布韦',
  "Congo": '刚果',
  "Central African Rep.": '中非',
  "Serbia": '塞尔维亚',
  "Bosnia and Herz.": '波黑',
  "Czech Rep.": '捷克',
  "W. Sahara": '西撒哈拉',
  "Lao PDR": '老挝',
  "Dem.Rep.Korea": '朝鲜',
  "Falkland Is.": '福克兰群岛',
  "Timor-Leste": '东帝汶',
  "Solomon Is.": '所罗门群岛',
  "Palestine": '巴勒斯坦',
  "N. Cyprus": '北塞浦路斯',
  "Aland": '奥兰群岛',
  "Fr. S. Antarctic Lands": '法属南半球和南极陆地',
  "Mauritius": '毛里求斯',
  "Comoros": '科摩罗',
  "Eq. Guinea": '赤道几内亚',
  "Guinea-Bissau": '几内亚比绍',
  "Dominican Rep.": '多米尼加',
  "Saint Lucia": '圣卢西亚',
  "Dominica": '多米尼克',
  "Antigua and Barb.": '安提瓜和巴布达',
  "U.S. Virgin Is.": '美国原始岛屿',
  "Montserrat": '蒙塞拉特',
  "Grenada": '格林纳达',
  "Barbados": '巴巴多斯',
  "Samoa": '萨摩亚',
  "Bahamas": '巴哈马',
  "Cayman Is.": '开曼群岛',
  "Faeroe Is.": '法罗群岛',
  "IsIe of Man": '马恩岛',
  "Malta": '马耳他共和国',
  "Jersey": '泽西',
  "Cape Verde": '佛得角共和国',
  "Turks and Caicos Is.": '特克斯和凯科斯群岛',
  "St. Vin. and Gren.": '圣文森特和格林纳丁斯'
}
//解密地图

function decodePolygon(coordinate, encodeOffsets, encodeScale) {
  var result = [];
  var prevX = encodeOffsets[0];
  var prevY = encodeOffsets[1];
  for (var i = 0; i < coordinate.length; i += 2) {
    var x = coordinate.charCodeAt(i) - 64;
    var y = coordinate.charCodeAt(i + 1) - 64;
    // ZigZag decoding
    x = (x >> 1) ^ -(x & 1);
    y = (y >> 1) ^ -(y & 1);
    // Delta deocding
    x += prevX;
    y += prevY;
    prevX = x;
    prevY = y;
    // Dequantize
    result.push([x / encodeScale, y / encodeScale]);
  }
  return result;
}
function decode(json) {
  if (!json.UTF8Encoding) {
    return json;
  }
  var encodeScale = json.UTF8Scale;
  if (encodeScale == null) {
    encodeScale = 1024;
  }
  var features = json.features;
  for (var f = 0; f < features.length; f++) {
    var feature = features[f];
    var geometry = feature.geometry;
    var coordinates = geometry.coordinates;
    var encodeOffsets = geometry.encodeOffsets;
    for (var c = 0; c < coordinates.length; c++) {
      var coordinate = coordinates[c];
      if (geometry.type === "Polygon") {
        coordinates[c] = decodePolygon(
          coordinate,
          encodeOffsets[c],
          encodeScale
        );
      } else if (geometry.type === "MultiPolygon") {
        for (var c2 = 0; c2 < coordinate.length; c2++) {
          var polygon = coordinate[c2];
          coordinate[c2] = decodePolygon(
            polygon,
            encodeOffsets[c][c2],
            encodeScale
          );
        }
      }
    }
  }
  // Has been decoded
  json.UTF8Encoding = false;
  return json;
}

async function getChina() {
  return decode(china)
  // return await axios.get('./js/china.json').then(function(ret) {  //ret是对象
  //   return decode(ret.data);
  //   // return ret.data;

  // })
}
async function getWorld() {
  // return await axios.get('./js/world.json').then(function(ret) {  //ret是对象
  //   return decode(ret.data);
  // })
  // return decode(world)
  return world
}




async function wordMap(id) {

  let chinaData = await getChina(); // 这里调用的函数就是上面解密的函数
  let worldData = await getWorld(); // 这里调用的函数就是上面解密的函数
  console.log(worldData)

  const regionsData = chinaData.features.map(item => {
    return {
      name: item.properties.NAME || item.properties.name,
      itemStyle: {
        areaColor: '#F87A7A',
        color: '#F87A7A'
      }
    }
  })


  let worldAndChina = Object.assign({}, worldData); // 原本的world还需要用 所以这里用了一个深拷贝赋值世界地图数据
  worldAndChina.features = worldAndChina.features.concat(chinaData.features); // 对，就是这么简单用concat把两者的features合并起来就可以了


  echarts.registerMap("world", worldAndChina);





  const chartDom = document.getElementById(`${id}`);
  const myChart = echarts.init(chartDom);
  // 飞线颜色
  var flyLineColor = "#e6a23c";
  //线条颜色
  var lineColor = "#356e9d";

  //高亮地图填充色
  var lightColor = "#f95356"; //绿色



  // 地图默认状态填充色
  var mapAreaColor = "#323c48";

  //字体颜色
  var textColor = "#ccc";

  var geoCoordMap = {
    "上海": [121.4648, 31.2891],
    "中国": [104.195397, 35.86166],
    "新加坡": [103.77546, 1.331445312499994],
    "美国": [-95.712891, 37.09024],
    "英国": [-3.435973, 55.378051],
    "瑞典": [11.98583, 57.69745], //瑞典 欧洲
    "印度尼西亚": [96.49257812500005, 5.229345703124991],
    "澳大利亚": [133.775136, -25.274398],
    "香港": [114.181681, 22.293696],
    "台湾": [121.509064, 25.044333],
    "法国": [2.213749, 46.227638],
    "德国": [10.451526, 51.165691],
    "韩国": [127.766922, 35.907757],
    "马来西亚": [101.975766, 4.210484],
    "缅甸": [95.956223, 21.913965],
    "加拿大": [-106.346771, 56.130366], //不确定 北美
    "巴基斯坦": [69.34511599999999, 30.375321],
    "菲律宾": [121.774017, 12.879721],
    "俄罗斯": [105.318756, 61.52401],
    "南非": [22.937506, -30.559482],
    "西班牙": [-3.74922, 40.46366700000001],
    "泰国": [100.992541, 15.870032],
    "越南": [108.277199, 14.058324],

  };
  const BJData = [

    [{
      name: "中国",
      value: 25024,
    }, {
      name: "上海"
    }],
    [{
      name: "新加坡",
      value: 41625,
    }, {
      name: "上海"
    }],
    [{
      name: "美国",
      value: 21626,
    }, {
      name: "上海"
    }],
    [{
      name: "英国",
      value: 13627,
    }, {
      name: "上海"
    }],
    [{
      name: "瑞典",
      value: 11628,
    }, {
      name: "上海"
    }],
    [{
      name: "印度尼西亚",
      value: 19629,
    }, {
      name: "上海"
    }],
    [{
      name: "澳大利亚",
      value: 9630,
    }, {
      name: "上海"
    }],
    [{
      name: "香港",
      value: 9631,
    }, {
      name: "上海"
    }],
    [{
      name: "台湾",
      value: 9632,
    }, {
      name: "上海"
    }],
    [{
      name: "法国",
      value: 9633,
    }, {
      name: "上海"
    }],
    [{
      name: "德国",
      value: 9634,
    }, {
      name: "上海"
    }],
    [{
      name: "韩国",
      value: 9635,
    }, {
      name: "上海"
    }],
    [{
      name: "马来西亚",
      value: 9636,
    }, {
      name: "上海"
    }],
    [{
      name: "缅甸",
      value: 9637,
    }, {
      name: "上海"
    }],
    [{
      name: "加拿大",
      value: 9638,
    }, {
      name: "上海"
    }],
    [{
      name: "巴基斯坦",
      value: 9639,
    }, {
      name: "上海"
    }],
    [{
      name: "菲律宾",
      value: 9640,
    }, {
      name: "上海"
    }],
    [{
      name: "俄罗斯",
      value: 9641,
    }, {
      name: "上海"
    }],
    [{
      name: "南非",
      value: 9642,
    }, {
      name: "上海"
    }],
    [{
      name: "西班牙",
      value: 9643,
    }, {
      name: "上海"
    }],
    [{
      name: "泰国",
      value: 9644,
    }, {
      name: "上海"
    }],
    [{
      name: "越南",
      value: 9645,
    }, {
      name: "上海"
    }]


  ];
  var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = geoCoordMap[dataItem[0].name];
      var toCoord = geoCoordMap[dataItem[1].name];
      if (fromCoord && toCoord) {
        res.push([
          {
            coord: toCoord,
          },
          {
            coord: fromCoord,
            value: dataItem[0].value,
          },
        ]);
      }
    }
    return res;
  };

  var series = [];
  [["上海", BJData]].forEach(function(item, i) {
    series.push(
      {
        "type": "lines",
        "zlevel": 3,
        "effect": {
          "show": true,
          "period": 4,
          "trailLength": 0.7,
          "symbol": "arrow",
          "symbolSize": 3,
          "color": flyLineColor
        },
        "lineStyle": {
          "normal": {
            "width": 0,
            "curveness": 0.2
          }
        },
        "data": convertData(item[1])
      }, {
      "type": "lines",
      "zlevel": 2,
      "symbolSize": 10,
      "effect": {
        "show": false,
        "period": 6,
        "trailLength": 0
      },
      "lineStyle": {
        "color": lineColor,
        "width": 1,
        "opacity": 0.8,
        "curveness": 0.2
      },
      "data": convertData(item[1])
    },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式 stroke, fill
          scale: 4, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            fontSize: "10px",
            show: true,
            color: "#fff",
            position: "right", //显示位置
            offset: [5, 0], //偏移设置
            formatter: "{b}", //圆环显示文字
          },
          emphasis: {
            show: true,
          },
        },
        symbol: "circle",
        symbolSize: function(val) {
          return 4 + val[2] / 2000; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
          },
        },
        data: item[1].map(function(dataItem) {

          return {
            name: dataItem[0].name,
            value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
          };
        }),
      },
      //被攻击点
      {
        type: "scatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: "stroke",
          scale: 4,
        },
        label: {
          normal: {
            show: true,
            position: "right",
            color: "#f95356",
            formatter: "{b}",

          },
          emphasis: {
            show: true,
          },
        },
        symbol: "pin",
        symbolSize: 20,
        itemStyle: {
          normal: {
            show: true,
            color: "#9966cc",
          },
        },
        data: [
          {
            name: item[0],
            value: geoCoordMap[item[0]].concat([100]),
          },
        ],
      },
      // 被攻击点 散点
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        symbol: "circle",
        symbolSize: 12,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: "fill", //波纹绘制方式 stroke, fill
          scale: 8 //波纹圆环最大限制，值越大波纹越大
        },
        itemStyle: {
          normal: {
            show: true,
            "shadowBlur": 8,
            "shadowColor": "red",
            "color": {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
              }, {
                offset: 0.8, color: 'transparent'
              },
              {
                offset: 1, color: 'red' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
          }
        },
        label: {
          normal: {
            show: false
          },
        },
        data: [{
          name: item[0],
          value: geoCoordMap[item[0]].concat([100])
        }]
      },
      // 高亮显示中国
      {
        type: 'map',
        nameMap: nameMap,
        selectedMode: false,
        geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
        selectedMode: 'single', //支持选中多个
        aspectScale: 0.6,
        roam: true, //是否允许缩放
        layoutCenter: ["48%", "45%"], //地图位置
        layoutSize: "110%",

        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          }
        },

        itemStyle: {
          normal: {
            areaColor: mapAreaColor,
            borderColor: lineColor
          },
          emphasis: {
            areaColor: lightColor
          }
        },


        map: 'world', //使用        
      },
    );
  });

  option = {
    // backgroundColor: "#000",
    title: {
      text: "全球分布图",
      left: "center",
      top: 20,
      textStyle: {
        color: "#6ec3ff",
      },
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "#222",
      borderColor: "#777",

      textStyle: {
        color: '#ccc',
      },
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      // extraCssText: "z-index:100",
      formatter: function(params, ticket, callback) {
        var name = params.name;
        var value = params.value[params.seriesIndex];

        if (params.seriesType === 'map') {
          const data = BJData.find(item => item[0].name == params.name)

          if (data && data.length) {
            return `<span style='color:#fff;'> ${name}: ${data[0].value}</span>`;
          }

        }

        //根据业务自己拓展要显示的内容


        if (value) {
          return `<span style='color:#fff;'> ${name}: ${value}</span>`;
        } else {
          return `<span style='color:#ccc;'>${name}</span>`
        }
      },
    },
    visualMap: {
      //图例值控制
      min: 0,
      max: 10000,
      show: false,
      calculable: true,
      color: ["#0bc7f3"],
      textStyle: {
        color: "#ccc",
      },
    },
    geo: {
      left: 0, top: 0, right: 0, bottom: 0,
      // boundingCoords: [
      //   // 定位左上角经纬度
      //   [-180, 90],
      //   // 定位右下角经纬度
      //   [180, -90]
      // ],
      // center: [115.97, 29.71],
      map: "world",
      nameMap: nameMap,
      label: {
        emphasis: {
          show: false
        }
      },
      aspectScale: 0.6,
      roam: true, //是否允许缩放
      layoutCenter: ["48%", "45%"], //地图位置
      layoutSize: "110%",
      itemStyle: {
        normal: {
          areaColor: mapAreaColor,
          borderColor: lineColor
        },
        emphasis: {
          areaColor: lightColor
        }
      },
      regions: regionsData

    },
    series,
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });




}



